<template>
  <view class="p-32">
    <uv-navbar placeholder title="订单确认" :autoBack="true"></uv-navbar>
    <view class="main-bg-color p-x-28 p-y-32 m-b-20">
      <view class="flex-bet-ali">
        <view class="flex-ali">
          <u-icon :name="ASSETSURL + 'adress.png'" size="38rpx"></u-icon>
          <view class="font-28 font-weight-middle m-l-10 m-r-20"> {{ addressData?.name }}
          </view>
          <view class="font-24 font-weight-middle text-greey"> {{ addressData?.phone }}</view>
        </view>
        <u-icon :name="ASSETSURL + 'edit.png'" size="38rpx"></u-icon>
      </view>
      <view class="font-32 font-weight-bold m-t-20"> {{ addressData?.province + addressData?.city +
        addressData?.district + addressData?.detail }}
      </view>
    </view>
    <view class="main-bg-color p-x-28 p-y-32 m-b-20">
      <view class="font-32 font-weight-bold m-b-15">商品清单</view>
      <block v-for="(item, index) in shopList" :key="index">
        <view class="flex">
          <!-- 复选框 -->
          <u-image :src="item.image" width="168rpx" height="168rpx" radius="8rpx" />

          <!-- 商品信息 -->
          <view class="m-l-20">
            <view class="font-32 font-weight-bold text-greey text-666">
              {{ item.name }}
            </view>
            <view class="m-b-30 m-t-10 flex-wra" style="gap: 20rpx">
              <view v-for="(it, indey) in 4" :key="index">
                <u-tag type="info" bgColor="#F3F3F3" borderColor="#F3F3F3" color="#333" size="mini">6cm{{ indey
                }}</u-tag>
              </view>
            </view>
            <view class="flex-ali-bet m-t-30">
              <view class="font-28 font-weight-middle">
                <text>x{{ item.quantity }}</text>
              </view>
              <view class="text-main font-36 font-weight-bold">￥168</view>
            </view>
          </view>
        </view>
        <u-line color="#D9D9D9" length="100%" margin="30rpx 0" v-if="index != shopList.length - 1"></u-line>
      </block>
    </view>
    <view class="main-bg-color p-x-28 p-y-32 m-b-20">
      <view class="title font-30 font-weight-middle">选择优惠券</view>
      <view class="flex-bet-ali p-28 m-t-24" style="background-color: #f6f6f6">
        <view class="font-28">优惠券</view>
        <view class="text-main font-30 flex-ali">
          新用户10元优惠券
          <view class="m-r-10"></view>
          <u-icon name="arrow-right" size="30rpx" color="#CACACA"></u-icon>
        </view>
      </view>
    </view>

    <view class="main-bg-color p-x-28 p-y-32 m-b-30">
      <view class="title font-30 font-weight-middle m-b-12">选择优惠券</view>
      <view class="flex-bet m-t-30">
        <text class="text-greey font-28">材料小计</text>
        <text class="font-28">￥62.58</text>
      </view>
      <view class="flex-bet m-t-30">
        <text class="text-greey font-28">制作费</text>
        <text class="font-28">￥0.00</text>
      </view>
      <view class="flex-bet m-t-30">
        <text class="text-greey font-28">件数</text>
        <text class="font-28">1 件</text>
      </view>
      <view class="flex-bet m-t-30">
        <text class="text-greey font-28">运费</text>
        <text class="font-28">￥6.00</text>
      </view>
      <view class="flex-bet m-t-30">
        <text class="text-greey font-28">优惠券</text>
        <text class="font-28">￥10.00</text>
      </view>
      <view class="flex-bet m-t-30">
        <text class="text-greey font-28">合计</text>
        <text class="font-28 text-main font-weight-bold">￥58.58</text>
      </view>
    </view>
    <dy-button btn_bg="#830102">确认下单</dy-button>
  </view>
</template>

<script setup>
import { getAddressDefault, getFreighttemplate, payOrder } from '@/api/api';
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const shopList = ref([]);

onLoad((options) => {
  shopList.value = JSON.parse(options.shopList);
  console.log(shopList.value, 123);
});


</script>
<style lang="scss" scoped>
.title {
  padding: 0 30rpx;
  position: relative;

  &::before {
    content: ' ';
    width: 14rpx;
    height: 14rpx;
    background: #830102;
    position: absolute;
    border-radius: 50%;
    left: 0rpx;
    top: 16rpx;
  }
}
</style>
<style>
page {
  background-color: #f6f6f6;
}
</style>
